<template>
	<view class="keyWordBox ov">

		<view class="fl keyBoxBo">
			<view class="fl ov keyBoxB" :style="'width:'+data.length*208+'rpx'">
				<view class="fl keyBox" @tap="clickKeyword(item.id,item.title)" v-for="(item,index) in data" :key='index'>
					<view class="key" :class="{check:item.id==key}">
						{{item.title}}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				key: '1',
			};
		},
		props: {
			//载入的标签数据
			data: Array

		},
		methods: {
			clickKeyword(e, title) {
				console.log(title)
				this.key = e;
				var data = {
					key: e,
					name: title
				}
				this.$emit('clickKeyword', data);
			}
		}
	}
</script>

<style>
	.fl {
		float: left;

	}

	.fr {
		float: right;
	}

	.key {
		background-color: #fff;
		border-radius: 10rpx;
		width: 160rpx;
		height: 90rpx;
		border: solid 1rpx #E7E7E7;
		
		/* margin-left: 20rpx; */
		/* height: 47rpx; */
		font-size: 20rpx;
	}

	.ov {
		overflow: hidden;
	}

	.check {
		color: #FDEAE6 !important;
		background-color: #007EC5;
		border-radius: 10rpx;
		height: 90rpx;
	}

	.keyWordBox {
		background-color: #FFFFFF;
		height: 120rpx;
		width: 100%;
		font-size: 30rpx;
		z-index: 9999;
	}

	.keyBox {
		color: #000;
		width: 170rpx;
		height: 120rpx;
		margin-top: 15rpx;
		line-height: 90rpx;
		text-align: center;
		/* border-right: 1px solid #ccc; */

	}
	.keyBoxBo {
		/* overflow-x: scroll; */
		/* width: 94%; */
		margin-left: 5%;
		height: 120rpx;
	}
</style>
